<template>
	<view class="new_comer_challenge">
		<view class="head flex-no-horizontal">
			<view class="left flex-no-horizontal">
				<image class="img1" src="../../../static/day7/5.png" mode=""></image>
				<view class="title">{{ title }}</view>
				<image class="img2" src="../../../static/ring/tipinfo.png" mode=""></image>
			</view>
			<uni-icons class="right" color="#999999" size="16" type="right" @click="toCheckInPlan"></uni-icons>
		</view>
		<view class="tip">{{ tips }}</view>

		<view class="challenge">
			<view class="giftBox" v-for="(item, index) in list" :key="index" @click="getGift(item)">
				<image v-if="item.status === 'ed'" class="ed" src="../../../static/day7/4.png" mode="aspectFit"></image>
				<image v-else-if="item.status === 'ing'" class="ing" src="../../../static/day7/3.png" mode="aspectFit">
				</image>
				<image v-else-if='index != list.length - 1' class="will" src="../../../static/day7/2.png"
					mode="aspectFit"></image>
				<image v-else class="last" src="../../../static/day7/1.png" mode=""></image>
				<view class="day" :class="[item.status]">{{ item.title }}</view>
			</view>

			<view class="gift_progress">
				<view class="progress" :style="{ width: progress + '%' }"></view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: "新人七日挑战",
				tips: "每日登录并佩戴12小时即可获得获得奖励",
				list: Array.from({
					length: 7
				}, (_, i) => ({
					id: i,
					title: `第${this.convertToChineseDays(i + 1)}天`,
					status: i === 0 ? "ed" : i < 2 ? "ing" : "will",
				})),
			};
		},

		computed: {
			progress() {
				return (this.list.filter((item) => item.status !== "will").length - 1) * 15;
			},
		},

		methods: {
			convertToChineseDays(day) {
				const chineseNumbers = [
					"零",
					"一",
					"二",
					"三",
					"四",
					"五",
					"六",
					"七",
					"八",
					"九",
					"十",
					"十一",
					"十二",
					"十三",
					"十四",
					"十五",
					"十六",
					"十七",
					"十八",
					"十九",
					"廿",
					"廿一",
					"廿二",
					"廿三",
					"廿四",
					"廿五",
					"廿六",
					"廿七",
					"廿八",
					"廿九",
					"卅",
					"卅一",
				];

				if (day < 1 || day > 31) {
					return "输入的天数必须在1到31之间";
				}

				return chineseNumbers[day];
			},

			toCheckInPlan() {
				uni.navigateTo({
					url: "/pages/ring/checkInPlan",
				});
			},

			getGift(gift) {
				if (gift.status === "ing") {
					// 领取奖励的逻辑
					// uni.showToast({
					// 	title: `领取${gift.title}的奖励`,
					// 	icon: "none",
					// });
					this.$emit("getGift", gift);
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.new_comer_challenge {
		margin: 0 32rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.4);
		padding: 20rpx 30rpx;


		.head {
			width: 100%;
			margin-bottom: 10rpx;

			.left {
				.img1 {
					width: 36rpx;
					height: 36rpx;
				}

				.img2 {
					width: 24rpx;
					height: 24rpx;
				}


				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #1952f8;
					margin-left: 4rpx;
					margin-right: 12rpx;
				}
			}

			.right {
				margin-left: auto;
			}
		}

		.tip {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}

		.challenge {
			width: 100%;

			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
			position: relative;

			.giftBox {
				position: relative;
				z-index: 1;
				width: 100%;
				text-align: center;

				image {
					display: block;
					margin: auto;
					width: 40rpx;
					height: 40rpx;

					&.ing {

						transform: scale(3.2);
						// filter: drop-shadow(1px 1px 30rpx rgba(35, 89, 248, 0.5));
					}

					&.ed {}

					&.will {}

					&.last {
						transform: scale(1.7);
					}
				}

				.day {
					font-weight: 500;
					font-size: 20rpx;
					color: rgba(35, 89, 248, 1);
					margin-top: 26rpx;
				}

				.ing {
					color: #2359f8;
				}

				.ed {
					color: #2359f8;
				}

				.will {
					color: black;
				}
			}

			.gift_progress {
				position: absolute;
				top: 14rpx;
				left: 40rpx;
				width: calc(100% - 80rpx);
				height: 12rpx;
				background-color: rgba($color: #666666, $alpha: 0.1);
				overflow: hidden;
				z-index: 0;

				.progress {
					width: 0%;
					height: 100%;
					max-width: 100%;
					background: linear-gradient(180deg, #87d5ff 0%, #2359f8 100%);
				}
			}
		}
	}
</style>